<template>
  <div
    class="h-full overflow-auto bg-white dark:bg-zinc-800 duration-500 scrollbar-thin scrollbar-thumb-transparent xl:scrollbar-thumb-zinc-200 xl:dark:scrollbar-thumb-zinc-900 scrollbar-track-transparent"
    ref="containerRef"
  >
    <navigation-vue />
    <div class="max-w-screen-xl mx-auto relative m-1 xl:mt-4">
      <list-vue></list-vue>
    </div>
    <!-- 移动端下的TabBar -->
    <z-trigger-menu
      v-if="isMobileTerminal"
      class="fixed bottom-6 m-auto left-0 right-0 w-[220px]"
    >
      <z-trigger-menu-item
        icon="home"
        iconClass="fill-zinc-400 dark:fill-zinc-500"
      >
        首页
      </z-trigger-menu-item>
      <z-trigger-menu-item
        v-if="token"
        icon="vip"
        iconClass="fill-zinc-400 dark:fill-zinc-500"
        textClass="text-zinc-400 dark:text-zinc-500"
        @click="onVipClick"
      >
        VIP
      </z-trigger-menu-item>
      <z-trigger-menu-item
        icon="profile"
        iconClass="fill-zinc-400 dark:fill-zinc-500"
        textClass="text-zinc-400 dark:text-zinc-500"
        @click="onMyClick"
      >
        {{ token ? '我的' : '去登录' }}
      </z-trigger-menu-item>
    </z-trigger-menu>
  </div>
</template>
<script>
export default {
  name: 'home'
}
</script>
<script setup>
import { onActivated, ref } from 'vue'
import navigationVue from './components/navigation/index.vue'
import listVue from './components/list/index.vue'
import { isMobileTerminal } from '@/utils/flexible'
import { useUserStore } from '@/store/modules/user'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/store/modules/app'
import { useScroll } from '@vueuse/core'

const router = useRouter()
const userStore = useUserStore()
const { token } = storeToRefs(userStore)
const appStore = useAppStore()
// 记录滚动
const containerRef = ref(null)
const { y: containerRefScrollY } = useScroll(containerRef)

// 被缓存的组件再次可见onActivated时触发
onActivated(() => {
  if (!containerRef.value) return
  containerRef.value.scrollTop = containerRefScrollY.value
})

const onVipClick = () => {
  appStore.changeRouterType('push')
  router.push('/member')
}

const onMyClick = () => {
  appStore.changeRouterType('push')
  if (token.value) {
    router.push('/profile')
  } else {
    router.push('/login')
  }
}
</script>

<style lang="scss" scoped></style>
